<!-- 轮播图组件 -->
<template>
  <view class="banner-container">
    <swiper 
      class="banner-swiper"
      :indicator-dots="true" 
      :autoplay="true" 
      :interval="5000" 
      :duration="500"
      :circular="true"
      indicator-color="rgba(255,255,255,0.5)"
      indicator-active-color="#00C853"
    >
      <swiper-item 
        v-for="banner in banners" 
        :key="banner.id"
        @tap="$emit('click', banner)"
      >
        <image 
          :src="banner.image" 
          mode="aspectFill" 
          class="banner-image"
        ></image>
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup lang="ts">
import type { Banner } from '../types';

interface Props {
  banners: Banner[];
}

defineProps<Props>();
defineEmits(['click']);
</script>

<style scoped>
.banner-container {
  margin-bottom: 20rpx;
}

.banner-swiper {
  height: 300rpx;
  border-radius: 20rpx;
  overflow: hidden;
  margin: 0 30rpx;
}

.banner-image {
  width: 100%;
  height: 100%;
}
</style>